<template>
	<view class="room-check-page">
		<image class="topBg" :src="roomImgUrl+'room-check-top-bg.png'" @tap='gasStatistics()'></image>
		<view class="search-con c-flex ">
			<view class="c-flex jc-between gap-5">
				<view class="input-con c-flex jc-start c-item-center ">
					<image :src="remoteImgUrl+'search-icon.png'" style="width: 42rpx;max-height: 42rpx;    margin-right: 12rpx;"></image>
					<input class="uni-input" v-model="lpgUserName" name="text" style="width:72%" confirm-type="search"  placeholder="根据用户名称搜索" @input="onInputChange" />
					<view class="line"></view>
					<text @click="onInputChange">搜索</text>
				</view>
			</view>
			
			<view  @click="onSeleDate" class="year-val c-flex c-item-center">{{year}}年
				<view></view>
			</view>		
		</view>
		<view class="tabs-con c-flex c-flex-row jc-between">
			<view class="tab-item" v-for="(item,index) in userBarArr" :key="index" @click="onTabbarClick(item)"
			    :class="{'selected':item.selected}">
				<image class="sele-bg" v-if="item.selected" :src="orderImgUrl+'choose.png'"></image>		
				{{item.label}}
			</view>
		</view>
		<view class="check-tabs-con c-flex c-flex-row jc-between">
			<view class="tab-item" v-for="(item,index) in checkBarArr" :key="index" @click="onCheckTabbarClick(item)"
			    :class="{'selected':item.selected}">	
				{{item.label}}
			</view>
		</view>
		<!-- 日期选择 
		<!-- 列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="p-list">
				<view class="p-l-item" v-for="(item,i) in list" :key="i">
					
					<view class="c_title c-flex">
						<view class="circle_first_char">
							{{getFirstSubstr(item.name)}}
						</view>
						<view class="c_title_type">
							<view class="name">{{item.name ||'' }}</view>
							<view class="time">用户电话:{{item.phone || ''}}</view>
						</view>
						<view class="c-pos-r">
							<view class="checkStatus"  :class="item.patrolResult===0?'unCheck':item.patrolResult===1?'normal':'warn'" ><view>{{item.patrolResult ===0?'未安检':item.patrolResult ===1?'安检合格':'安检异常'}}</view></view>
						</view>
					</view>
					<view class="p-content">
						<view class="p-c-item c-flex " >
							<text>安检类型：</text> <text>{{item.type===0?'民用安检':item.type===1?'商业安检':'工业安检'}}</text>
						</view>
						<view class="p-c-item c-flex" >
							<text>用户地址：</text> <text>{{item.street}}{{item.villageName}}{{item.address}}</text>
						</view>
						<view class="p-btn c-flex jc-end">
							<view class="contactBtn" v-if="item.patrolResult===0 " @tap="roomCheck(item)">入户安检</view>
							<view class="sureBtn" v-if="item.patrolResult===2"  @tap='roomCheck(item)'>再次安检</view>
							<view class="sureBtn" v-if="item.patrolResult!==0"  @tap='historyHandler(item)'>安检记录</view>
						</view>
										
						
					</view>	
					
				</view>
			</view>
		</mescroll-body>
		<tyd-date ref="tydDate" :startYear='2023' :mode="'year'" :current="true" :chooseValue="year" @dateChange="onMonthChange"></tyd-date>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {YHQ_USER_STATUS,YHQ_CHECK_STATUS} from '@/utils/global.js';
	import TydDate from '@/components/tyd-date/tyd-date.vue';
	import {mapStatus,mapMutations} from 'vuex'
	import {
		toast
	} from '@/utils/utils.js';
	export default {
		mixins: [MescrollMixin], 
		components: {
			TydDate
		},
		data() {
			return {
				orderImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/order/',
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/',
				roomImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/room/',
				list:[],
				limit: 10,
				page: 1,
				total: 0,
				loadStatus: 'more', 
				year: '',
				checkBarItem:null,
				userBarItem:null,
				userBarArr:[],
				checkBarArr:[],
				lpgUserName:'',
				downOption:{
					auto:false,
					native: true // 必须配置此项，且需在pages.json配置"enablePullDownRefresh" : true
				},
				upOption:{
					auto:false,
					noMoreSize: 10, 
					empty:{
						tip: '~ 搜索无数据 ~',
						btnText: ''
					}
				},
			};
		},
		onLoad() {
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor: '#000000'
			});
			const date = new Date();
			this.userBarArr = YHQ_USER_STATUS;
			this.checkBarArr = YHQ_CHECK_STATUS;
			this.year = date.getFullYear();
			//this.initTabbar();
		},
		onShow() {
			this.initTabbar();
		},
		methods:{
			...mapMutations(['setUserType','setCheckStatus']),
			initTabbar(){
				
				this.userBarArr.forEach(item=>{
					item['selected'] = false;
				});
				this.userBarItem = this.$store.getters.userType;
				this.userBarItem.selected = true;
				this.checkBarArr.forEach(item=>{
					item['selected'] = false;
				});
				this.checkBarItem = this.$store.getters.checkStatus;
				
				this.checkBarItem.selected = true;
				this.initData();
			},
			gasStatistics(){
				//toast('正在开发中...')
				return;
				uni.navigateTo({
					url:'../statistics-check/statistics-check'
				})
			},
			roomCheck(item){
				uni.navigateTo({
					url:'./room-check?item='+JSON.stringify(item)+'&type=year'
				})
			},
			historyHandler(item){
				const addr = item.address+item.villageName;
				uni.navigateTo({
					url:'./room-check-history?userId='+item.id+'&year='+this.year+'&address='+addr
				})
			},
			
			//tabbar切换事件监听
			onTabbarClick(item){
				
				//uni.setStorageSync('orderStatus',null)
				this.userBarItem.selected = false;
				item.selected = true;
				this.userBarItem = item;
				this.setUserType(item)
				//this.setOrderStatus(item)
				this.list = [];
				this.page = 1;
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			onCheckTabbarClick(item){
				this.checkBarItem.selected = false;
				item.selected = true;
				this.checkBarItem = item;
				this.setCheckStatus(item);
				//this.setOrderStatus(item)
				this.list = [];
				this.page = 1;
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			// 下拉刷新
			downCallback(){
				this.onInputChange();
				console.log('down')
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log('up')
				this.page = page.num;
				//联网加载数据
				this.initData();
			},
			// 主动触发下拉刷新
			triggerDownScroll(){
				this.mescroll.triggerDownScroll()
			},
			onInputChange(){
				this.initData();
			},
			initData(){
				uni.showLoading();
				const params = {page:this.page,limit:this.limit,name:this.lpgUserName,patrolResult:this.checkBarItem.value,type:this.userBarItem.value,year:this.year};
				this.$API.liquefiedGasRoomYearCheckList(params).then(res =>{
						uni.hideLoading();
						this.mescroll.endSuccess(res.page.list.length);
						//设置列表数据
						if(res.page.currPage == 1) this.list = []; //如果是第一页需手动制空列表
						const currList  = res.page.list;
						this.list=this.list.concat(currList); //追加新数据
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			},
			onViewDetails(item){
				uni.navigateTo({
					url:'./security-check?item='+JSON.stringify(item)
				})
			},
			//月份选择
			onMonthChange(e) {
				this.year = `${e.year}`;
				console.log(this.year)
				this.initData();
			},
			//打开日期选择器
			onSeleDate(e) {
				this.$refs.tydDate.show();
			},
			getFirstSubstr(str) {
				if (str) {
					return str.substr(0, 1)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.room-check-page{
		position: relative;
		background-image: linear-gradient(rgba(249, 195, 115, .3) 0%, #F9F9F9 100%);
		height: 100%;
		.topBg {
			width: 750rpx;height: 222rpx;margin-top: 20rpx;margin-left: 28rpx;
		}
		
		.search-con{
			border-radius: 18rpx;padding: 20rpx 18rpx 0;
			.input-con{
				position: relative;width: 496rpx;border: 2rpx solid rgba(255, 154, 22, 1);
				height: 80rpx;line-height: 80rpx;padding-left: 18rpx;background: #ffffff;border-radius: 16rpx;font-size: 24rpx;
				.line{
					height: 40rpx;border: 2rpx solid rgba(255, 154, 22, 1);position: absolute;right: 115rpx;
				}
				text{
					font-size: 28rpx;font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;color: #3E3E3E;line-height: 40rpx;position: absolute;right: 38rpx;
				}
			}
			/*修改提示文字的颜色*/
			input::-webkit-input-placeholder {color: #8B959F;}
			input:-moz-placeholder {color: #8B959F;}
			input::-moz-placeholder { color: #8B959F;}
			input:-ms-input-placeholder { color: #8B959F;}
			.year-val{
				width: 180rpx;height: 80rpx;background: #FFFFFF;border-radius: 16rpx;border: 2rpx solid  rgba(255, 154, 22, 1);font-size: 28rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #333333;margin-left: 17rpx;padding-left:32rpx;
				view{
					width: 0;height: 0;border-top: 7px solid rgba(102, 102, 102, 1);border-right: 6px solid transparent;border-left: 6px solid transparent;margin-left: 12rpx;
				}
			}
			.arrow-right {
				width: 34rpx;
				height: 34rpx;
			}
		}
		.tabs-con{
			margin: 40rpx 40rpx 8rpx; width:80%;
			.tab-item{
				font-size: 28rpx;font-weight: 500;color: #001F42;position: relative;padding-bottom: 14rpx;
				text{
					background: #FA4B4B;padding: 0 10rpx;border-radius: 50%;
					font-size: 24rpx;color: #ffffff;position: absolute;right: -20rpx;top: -14rpx;
				}
				.sele-bg{
					position: absolute;width: 90rpx;height: 24rpx;bottom: 5rpx;
				}
			}
			.selected{ font-size: 30rpx;font-weight: 800;color: #333333;}//border-bottom: 6rpx solid #0084FF;
		}
		.check-tabs-con{
			margin: 20rpx 40rpx 8rpx; width:80%;
			.tab-item{
				background: #FFFFFF;border-radius: 27rpx;font-family: PingFang-SC, PingFang-SC;font-weight: 400;font-size: 26rpx;color: #3E3E3E;padding: 10rpx 28rpx;position: relative;//padding-bottom: 14rpx;
				
				.sele-bg{
					position: absolute;width: 90rpx;height: 24rpx;bottom: 5rpx;
				}
			}
			.selected{font-weight: 400;font-size: 26rpx;color: #FFFFFF;background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);border-radius: 27rpx;
			}
		}
		.p-list{
			margin: 20rpx 18rpx 0;
			.p-l-item{
				background: #FFFFFF;border-radius: 18rpx;padding: 15rpx 28rpx 20rpx;margin-bottom:20rpx;position:relative;
				.p-content {
					margin: 25rpx 0 10rpx;
					.p-c-item {
						font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 26rpx;margin-bottom: 24rpx;
						text:first-child{
							color: #8B959F;
						}
						text:last-child{
							color: #333333;
							width: 510rpx;
						}

					}	
				}
				.c_title {
					font-family: PingFangSC-Semibold, PingFang SC;
					padding: 18rpx 0 14rpx 0rpx;
					position: relative;
					.c-pos-r{
						position: absolute; right: 5rpx; top:15rpx;
						.checkStatus{
							padding: 0 15rpx;
							margin-top: 10rpx;
							height: 36rpx;border-radius: 8rpx;transform:skewX(-12deg);font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 20rpx;color: #FFFFFF;line-height: 36rpx;text-align: center;
							view{
								transform:skewX(12deg); 
							}
							
						}
						.normal{
							background: linear-gradient( 180deg, #19C132 0%, #14A92A 100%);
						}
						.warn{
							background: linear-gradient( 180deg, #FF776C 0%, #FE6258 47%, #FD4B41 100%);
						}
						.unCheck{
							background: linear-gradient( 180deg, #F9C373 0%, #FF9A16 100%);
						}
					}
					
					.circle_first_char{
						
						line-height: 92rpx;text-align: center;width: 92rpx;height: 92rpx;background: rgba(232,103,72,0.07);border-radius: 46rpx;border: 2rpx solid #E86748;font-family: PingFangSC, PingFang SC;font-weight: 600;font-size: 40rpx;color: #E86748;
										
						image {
							width: 68rpx;
							height: 68rpx;
						}
					}
				
				
					.c_title_type {
						padding-left: 24rpx;
						padding-top: 10rpx;
				
						.name {
							width: 430rpx;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
							font-family: PingFang-SC, PingFang-SC;font-weight: 800;font-size: 30rpx;color: #333333;
						}
				
						.time {
							margin-top: 8rpx;font-family: PingFang-SC, PingFang-SC;font-weight: 400;font-size: 26rpx;color: #8B959F;
						}
					}
				}
				.p-btn{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					text-align: center;
					gap: 26rpx;
					.contactBtn{
						border-radius: 28rpx;border: 2rpx solid #E86748;width: 152rpx;height: 56rpx;line-height: 56rpx;color: #E86748;
					}
					.sureBtn{
						width: 152rpx;height: 56rpx;border-radius: 28rpx;border: 2rpx solid #CCCCCC;line-height: 56rpx;color: #333333;
					}
					
				}
			}
		}
	}
	
</style>
